<template>
  <div class="container">
    <el-form :inline="true" class="tableSearchBox" size="medium">
      <el-form-item>
        <el-select v-model="methodValue" size="medium" style="margin-right: 10px">
          <el-option v-for="(item,index) in methodList" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="selectValue" size="medium" style="margin-right: 10px" @change="roleChange">
          <el-option v-for="(item,index) in selectList" :key="index" :label="item.roleName" :value="item.rid">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updatePermission" icon="el-icon-setting">设置</el-button>
      </el-form-item>
    </el-form>
    <el-tree class="settingTree" style="margin: 0 20px;padding:20px;" :data="menuData" empty-text show-checkbox
      node-key="mid" ref="menuTree" default-expand-all check-on-click-node :expand-on-click-node="false"
      :props="defaultProps"></el-tree>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        methodValue: "role",
        methodList: [
          // {label: '成员管理', value: 'staff'},
          // {label: '部门管理', value: 'department'},
          {
            label: "角色管理",
            value: "role"
          }
        ],
        selectValue: "",
        selectList: [{
          roleName: "小员工",
          rid: 2,
          roleInfo: "最小级别员工",
          createTime: "2019-10-17 14:56:59"
        }],
        menuData: [],
        checkedData: [],
        checkList: {},
        defaultProps: {
          children: "sub",
          label: "title"
        }
      };
    },
    mounted() {
      this.queryAllMenu();
      // this.getRoleData();
    },
    methods: {
      queryAllMenu() {
        const self = this;
        // self.$axios.post("/service/__menuGet").then(res => {
        //   if (res.data.status === "success") {
        //     self.menuData = res.data.res;
        //     for (let i in self.menuData) {
        //       if (self.menuData[i].sub.length > 0) {
        //         const menuChildren = [];
        //         for (let j in self.menuData[i].sub) {
        //           menuChildren.push(self.menuData[i].sub[j].mid);
        //         }
        //         self.checkList[self.menuData[i].mid] = menuChildren;
        //       }
        //     }
        //   } else {
        //     self.$message(res.data.res);
        //   }
        // });
        self.menuData = [{
            icon: "icon-yingyeting",
            path: "/businessCharges",
            sub: [],
            title: "营业收费"
          },
          {
            icon: "icon-chaobiaoguanli",
            path: "",
            sub: [{
                title: "人工抄表",
                path: "/meterReading/manualMeterReading",
                icon: "",
                sub: {}
              },
              {
                title: "抄表记录",
                path: "/meterReading/meterReadingRecord",
                icon: "",
                sub: {}
              },
              {
                title: "抄表册",
                path: "/meterReading/meterReadingBook",
                icon: "",
                sub: {}
              },
              {
                title: "抄表分析",
                path: "/meterReading/meterReadingAnalysis",
                icon: "",
                sub: {}
              },
              // {
              //   title: "特殊抄表",
              //   path: "/meterReading/specialMeterReading",
              //   icon: "",
              //   sub: {}
              // }
            ],
            title: "抄表管理"
          },
          {
            icon: "icon-shoufeiguanli",
            path: "",
            sub: [{
                title: "收费记录",
                path: "/charge/chargeRecord",
                icon: "",
                sub: {}
              },
              {
                title: "补打发票",
                path: "/charge/supplementInvoice",
                icon: "",
                sub: {}
              },
              {
                title: "充值记录",
                path: "/charge/rechargeRecord",
                icon: "",
                sub: {}
              },
              {
                title: "收费分析",
                path: "/charge/chargeAnalysis",
                icon: "",
                sub: {}
              },
              {
                title: "减免操作",
                path: "/charge/reduceOrRemitOperation",
                icon: "",
                sub: {}
              },
              {
                title: "欠费用户",
                path: "/charge/usersInArrears",
                icon: "",
                sub: {}
              }
            ],
            title: "收费管理"
          },
          {
            icon: "icon-kehuguanli",
            path: "",
            sub: [{
                title: "客户信息",
                path: "/customer/customerInformation",
                icon: "",
                sub: {}
              },
              {
                title: "客户查询",
                path: "/customer/customerInquire",
                icon: "",
                sub: {}
              },
              {
                title: "客户分析",
                path: "/customer/customerAnalysis",
                icon: "",
                sub: {}
              }
            ],
            title: "客户管理"
          },
          {
            icon: "icon-xinxiguanli",
            path: "",
            sub: [{
                title: "短信通知",
                path: "/information/SMSNotification",
                icon: "",
                sub: {}
              },
              {
                title: "短信记录",
                path: "/information/SMSRecord",
                icon: "",
                sub: {}
              },
              {
                title: "短信配置",
                path: "/information/SMSConfiguration",
                icon: "",
                sub: {}
              },
              {
                title: "微信服务",
                path: "/information/wechatService",
                icon: "",
                sub: {}
              }
            ],
            title: "信息管理"
          },
          {
            icon: "icon-baobiaoguanli",
            path: "/report",
            sub: [{
              //   title: "抄表员考核",
              //   path: "/report/assessmentOfMeterReader",
              //   icon: "",
              //   sub: {}
              // },
              // {
              title: "收费员考核",
              path: "/report/assessmentOfTollCollector",
              icon: "",
              sub: {}
            }],
            title: "报表管理"
          },
          {
            icon: "icon-xitongshezhi",
            path: "",
            sub: [{
                title: "用户管理",
                path: "/system/userManagement",
                icon: "",
                sub: {}
              },
              {
                title: "角色管理",
                path: "/system/roleManagement",
                icon: "",
                sub: {}
              },
              {
                title: "权限设置",
                path: "/system/permissionSetting",
                icon: "",
                sub: {}
              },
              {
                title: "系统日志",
                path: "/system/systemLog",
                icon: "",
                sub: {}
              },
              {
                title: "水价设置",
                path: "/system/waterPriceSetting",
                icon: "",
                sub: {}
              },
              {
                title: "区域设置",
                path: "/system/regionalSetting",
                icon: "",
                sub: {}
              },
              {
                title: "公告发布",
                path: "/system/announcementRelease",
                icon: "",
                sub: {}
              },
              {
                title: "数据备份",
                path: "/system/dataBackup",
                icon: "",
                sub: {}
              }
            ],
            title: "系统设置"
          }
        ];
        for (let i in self.menuData) {
          if (self.menuData[i].sub.length > 0) {
            const menuChildren = [];
            for (let j in self.menuData[i].sub) {
              menuChildren.push(self.menuData[i].sub[j].id);
            }
            self.checkList[self.menuData[i].id] = menuChildren;
          }
        }
      },
      getRoleData() {
        const self = this;
        self.$axios.post("/service/__roleGet").then(res => {
          if (res.data.status === "success") {
            self.selectList = res.data.res;
          } else {
            self.$message(res.data.res);
          }
        });
      },
      roleChange(value) {
        const self = this;
        const param = {
          rid: value
        };
        self.$axios.post("/service/__permissionGet", param).then(res => {
          if (res.data.status === "success") {
            let menuList = res.data.res;
            self.checkedData = [];
            for (let i in menuList) {
              if (menuList[i].sub.length > 0) {
                for (let j in menuList[i].sub) {
                  self.checkedData.push(menuList[i].sub[j]);
                }
              } else {
                self.checkedData.push(menuList[i]);
              }
            }
            self.$refs.menuTree.setCheckedNodes(self.checkedData);
          } else {
            self.$message(res.data.res);
          }
        });
      },
      updatePermission() {
        const self = this;
        if (self.selectValue === "") {
          self.$message("请选择角色");
        } else {
          let isCheck;
          const checkedKeys = self.$refs.menuTree.getCheckedKeys();
          for (let i in self.checkList) {
            isCheck = false;
            for (let j in self.checkList[i]) {
              for (let k = 0; k < checkedKeys.length; k++) {
                if (i == checkedKeys[k]) {
                  isCheck = true;
                  break;
                }
                if (self.checkList[i][j] === checkedKeys[k]) {
                  isCheck = true;
                  checkedKeys.splice(k, 0, i);
                  break;
                }
              }
              if (isCheck) {
                break;
              }
            }
          }
          const param = {
            mid: checkedKeys.join(","),
            rid: self.selectValue
          };
          self.$axios.post("/service/__permissionMod", param).then(res => {
            self.$message(res.data.res);
          });
        }
      }
    }
  };
</script>

<style>
  .settingTree .el-tree-node__content {
    height: 40px;
    padding-left: 0 !important;
    padding-right: 18px;
  }

  .el-tree-node:focus>.el-tree-node__content,
  .el-tree-node__content:visited,
  .el-tree-node__content:hover,
  .el-tree-node__content:active {
    /* background: rgba(12, 61, 89, 0.6) !important; */
  }

  .settingTree .el-tree-node__children .el-tree-node {
    display: inline-block;
    margin-left: 25px;
  }

  .settingTree .el-tree-node {
    white-space: unset;
  }
</style>